```svelte {18-25}
<script lang="ts">
  import * as colorPicker from "@zag-js/color-picker"
  import { normalizeProps, useMachine } from "@zag-js/svelte"

  const id = $props.id()
  const service = useMachine(colorPicker.machine, {
    id,
    defaultValue: colorPicker.parse("hsl(0, 100%, 50%)"),
  })
  const api = $derived(colorPicker.connect(service, normalizeProps))

  const presets = ["#ff0000", "#00ff00", "#0000ff"]
</script>

<div {...api.getRootProps()}>
  <!-- ... -->
  <div {...api.getPositionerProps()}>
    <div {...api.getContentProps()}>
      <div {...api.getSwatchGroupProps()}>
        {#each presets as preset}
          <button {...api.getSwatchTriggerProps({ value: preset })}>
            <div style="position:relative;">
              <div {...api.getTransparencyGridProps({ size: "4px" })}></div>
              <div {...api.getSwatchProps({ value: preset })}></div>
            </div>
          </button>
        {/each}
      </div>
    </div>
  </div>
</div>
```
